<template>
<view class="box">
	<view class="status_bar">
	           
	       </view>
		<view class="top">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="top">
				<swiper-item>
					<view>
						<image src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/a7254668460d4636aed01930132ec251tribe_bgi_3.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content" >
			<!-- 官方 -->
			<view class="bigBox">
				<view class="more" @click="toMore0()">
					<image src="../../static/arrow.png" mode="" class="moreImage"></image>
					<view class="moreText">
						更多
					</view>
				</view>
				<image src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/a4102fc361204354a0229f30bb116a7cactivity00.png" mode="" class="host"></image>
				<scroll-view scroll-x>
					<view class="father">
						<tribeActivity v-for="item in activeActivities0" :item="item" :key="item.id"></tribeActivity>
					</view>	
				</scroll-view>	
			</view>
			<!-- 校园活动 -->
			<view class="bigBox" >
				<view class="more"  @click="toMore1()">
					<image src="../../static/arrow.png" mode="" class="moreImage"></image>
					<view class="moreText">
						更多
					</view>
				</view>
				<image src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/5036247b4eda47a4bff7d754da24fd6cactivity01.png" mode="" class="host"></image>
				<scroll-view scroll-x>
					<view class="father">
						<tribeActivity v-for="item in activeActivities1" :item="item" :key="item.id"></tribeActivity>
					</view>	
				</scroll-view>
				</view>
			<!-- 个人活动 -->
			<view class="bigBox" >
				<view class="more"  @click="toMore2()">
					<image src="../../static/arrow.png" mode="" class="moreImage"></image>
					<view class="moreText">
						更多
					</view>
				</view>
				<image src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/806d1f7d444644a3b5446333fd05b92aactivity02.png" mode="" class="host"></image>
				<scroll-view scroll-x>
					<view class="father">
						<tribeActivity v-for="item in activeActivities2" :item="item" :key="item.id"></tribeActivity>
					</view>	
				</scroll-view>
				
			</view>
			
		</view>
		
			
	</view>

</template>

<script>
    // import image from '../../uni_modules/uview-ui/libs/config/props/image'
	
	import TribeActivity from "../../components/tribeActivity/tribeActivity.vue"
	import config from "../../utils/config";
	export default {
		components:{
			TribeActivity,
		},
		onLoad() {
			this.getActivity0Date();
			this.getActivity1Date();
			this.getActivity2Date();
		},
		onShow() {
			this.getActivity0Date();
			this.getActivity1Date();
			this.getActivity2Date();
		},
		data() {
			return {
				type:0,
				// dailyArr:[],
				// logArr:[],
				activity0:[],
				activity1:[],
				activity2:[],
				imgNumber:0,//图片数组下标
				//顶部样式显示
				jumpActivity:true,
				jumpDaily:true,
				jumpIndex:false,
				//样式点击变化
				actState:true,
				dailyState:true,
				indexState:true,
				imglist:[

					'/static/tribe_bgi_3.png'
					
				],
				//组件显示
				logsContent:true,
				dailyContent:false,
				actContent:false,
			}
		},
		computed: {
			activeActivities0() {
				const now= new Date();
			    const filteredActivities = this.activity0.filter(activity => {  

			    const endTime = new Date(activity.endTime);  
			    return endTime > now;  
			      });  
			    return filteredActivities.length >= 5 ? filteredActivities.slice(0, 5) : filteredActivities;  
			  }, 
			  activeActivities1() {
				const now= new Date();
			    const filteredActivities = this.activity1.filter(activity => {  
			    const endTime = new Date(activity.endTime);  
			    return endTime > now;  
			    });  
			    return filteredActivities.length >= 5 ? filteredActivities.slice(0, 5) : filteredActivities;  
			    }, 
				activeActivities2() {
					const now= new Date();
				    const filteredActivities = this.activity2.filter(activity => {  
				    const endTime = new Date(activity.endTime);  
				    return endTime > now;  
				    });  
				    return filteredActivities.length >= 5 ? filteredActivities.slice(0, 5) : filteredActivities;  
				  }, 
		},
		methods: {
			onPullDownRefresh() {
			      this.pageNum = 1;
			      this.getActivity0Date()
			      uni.stopPullDownRefresh()
			},
			toMore0(){
				uni.navigateTo({
					url:`/pages/tribe/more?type=0`
				})
			},
			toMore1(){
				uni.navigateTo({
					url:`/pages/tribe/more?type=1`
				})
			},
			toMore2(){
				uni.navigateTo({
					url:`/pages/tribe/more?type=3`
				})
			},
			toActivity(){
				this.imgNumber=2
				this.jumpActivity=false//top-style
				this.jumpDaily=true
				this.jumpIndex=true
				this.dailyState=false//active-top-style
				this.indexState=false
				this.actState=true
				this.actContent=true//content
				this.logsContent=false
				this.dailyContent=false
				const box=document.querySelector('.box')
				box.style.backgroundColor='#dffafa'
				
				
			},
			
			toDaily(){
				this.imgNumber=1
				this.jumpActivity=true//top-style
				this.jumpDaily=false
				this.jumpIndex=true
				this.dailyState=true//active-top-style
				this.indexState=true
				this.actState=false
				this.actContent=false//content
				this.logsContent=false
				this.dailyContent=true
				const box=document.querySelector('.box')
				box.style.backgroundColor='#b8f5f5'
			},
			toIndex(){
				this.imgNumber=0
				this.jumpActivity=true//top-style
				this.jumpDaily=true
				this.jumpIndex=false
				this.dailyState=true//active-top-style
				this.indexState=true
				this.actState=true
				this.actContent=false//content
				this.logsContent=true
				this.dailyContent=false
				const box=document.querySelector('.box')
				box.style.backgroundColor='#b8f5f5'
			},
			
			// getDailyData(){
			// 	uni.request({
			// 		url:'https://www.fastmock.site/mock/f91bf50199e58a61fea4c985c443d075/api/tribe/oneDaily',
			// 		success: (res) => {
			// 			this.dailyArr=res.data.list
			// 		}
			// 	})
			// },
			// getLogData(){
			// 	uni.request({
			// 		url:'https://www.fastmock.site/mock/f91bf50199e58a61fea4c985c443d075/api/tribe/onelog',
			// 		success: (res) => {
			// 			// console.log(res)
			// 			this.logArr=res.data.list
			// 		}
			// 	})
			// },
			getActivity0Date(){
				uni.request({
					url:config.domain+'activities/querybyclass?type=0',
					success: (res) => {
						console.log(res)
						this.activity0 = res.data.result.data
						// console.log(res.data.result.data[0])
					}
				})
				
			},
			getActivity1Date(){
				uni.request({
					url:config.domain+'activities/querybyclass?type=1',
					success: (res) => {
						this.activity1 = res.data.result.data
					}
				})
			},
			getActivity2Date(){
				uni.request({
					url:config.domain+'activities/querybyclass?type=2',
					success: (res) => {
						this.activity2 = res.data.result.data
						// console.log(res)
					}
				})
			}
		}
	}
</script>

	<style lang="scss" scoped>
		.status_bar {
		        height: var(--status-bar-height);
		        width: 100%;
		    }
	.top {
		height: 400rpx;
		width: 750rpx;
		
		image {
			width: 100%;
			height: 400rpx;
			position: absolute;
			display: inline-block;
		}
		.font {
			text-align: center;
			color: white;
			font-weight: bold;
			font-size: 40rpx;
			display: inline-block;
			position: relative;
		}
		.jumpDaily {
			height: 220rpx;
			width: 70rpx;
			background-color: rgba(250, 124, 190, 0.7);
		    padding-top: 70rpx;
			float: right;
			margin-top: 70rpx;
			
		} 
		.jumpDai {
			float:left;
			height: 230rpx;
			width: 75rpx;
			background-color: rgba(250, 124, 190, 0.7);
			padding-top: 80rpx;
			margin-top: 55rpx;
			
		}
		
		.jumpActivity {
			height: 180rpx;
			width: 50rpx;
			background-color: rgba(121, 201, 208, 0.7);
			padding-top: 70rpx;
			float: right;
			margin-top: 70rpx;
		}
		.jumpAct {
			height: 220rpx;
			width: 75rpx;
			background-color: rgba(121, 201, 208, 0.7);
			padding-top: 80rpx;
			float: right;
			margin-top: 50rpx;
		}
		
		.jumpIndex {
			height: 220rpx;
			width: 75rpx;
			background-color: rgba(121, 201, 208, 0.7);
			padding-top: 80rpx;
			float: left;
			margin-top: 50rpx;
			
		}
		.jumpInd {
			float: left;
			height: 200rpx;
			width: 50rpx;
			background-color: rgba(121, 201, 208, 0.7);
			padding-top: 80rpx;
			margin-top: 50rpx;
			
		}
	    
	}
	.box {
		background-color: #fff;
	}
	.content {
		width: 750rpx;
		margin-top: 20rpx;
		
		.bigBox {
			width: 750rpx;
			height: 620rpx;	
			
			.more {
				
				width: 100rpx;
				height: 120rpx;
				position: absolute;
				right: 0rpx;
				z-index: 1;
				.moreImage {
					width: 90rpx;
					height: 90rpx;
				}
				.moreText {
					font-weight: bolder;
					text-align: center;
					width: 90rpx;
					position: relative;
					top: -20rpx;
					color: #00106d;
				}
			}
			.host {
				width: 100%;
				height: 80rpx;
				margin-top: 30rpx;
			}		
				// font-size: 55rpx;
				// font-weight: bolder;
				// text-indent: 35rpx;
			
			.father{
				white-space: nowrap;
				height: 500rpx;
			}
		}
	}
	


</style>
